<template>
  <div class="avatar-container">
      <img :src="imgUrl" alt="" :style="{width: imgSize + 'px', height : imgSize + 'px'}">
  </div>
  <!-- 最外层标签类名最好为组件名-container 方便父组件对子组件最外层标签样式控制 -->
</template>

<script>
export default {
    props:{ //属性
        imgUrl:{ //图片路径
            type:String, //规定该属性的属性值为字符串
            required:true, //规定该属性一定要传递属性值
        },
        imgSize:{ //图片尺寸   
            type:Number, //规定该属性的属性值为数字
            default:150,
        }
    }
}
</script>


<style scoped lang="less">
// scoped 区分不同组件中标签，原理在原有的选择器后面并列一个独一无二的属性选择器
// 使用less预编译器
.avatar-container{
    position:relative;
    width:100%;
    height:150px;
    img{
        position:absolute;
        margin-top:15px;
        left:50%;
        top:50%;
        transform:translateX(-50%) translateY(-50%);
        border-radius:50%;
    }
}
</style>